// 暗模式主题样式
// 当body或html有theme-dark类时应用这些样式

// 基础颜色变量
@dark-bg-primary: #1a1a1a;      // 主背景色
@dark-bg-secondary: #2c2c2c;    // 次背景色
@dark-bg-tertiary: #333333;     // 第三级背景色
@dark-text-primary: #ffffff;    // 主文字色
@dark-text-secondary: #cccccc;  // 次文字色
@dark-text-muted: #999999;      // 弱化文字色
@dark-border: #444444;          // 边框色
@dark-border-light: #555555;    // 浅边框色
@dark-shadow: rgba(0, 0, 0, 0.3); // 阴影色

// 全局暗模式样式
.theme-dark {
    // 基础元素
    body,
    #app {
        background: @dark-bg-primary !important;
        color: @dark-text-primary !important;
    }

    // 主要内容区域
    .el-main,
    .main-content,
    .content,
    .router-view,
    .app-main {
        background: @dark-bg-primary !important;
        color: @dark-text-primary !important;
    }

    // 卡片和容器
    .el-card,
    .page-content,
    .page-content-normal,
    .page-content-edit,
    .page-content-text {
        background: @dark-bg-secondary !important;
        border-color: @dark-border !important;
        color: @dark-text-primary !important;
    }

    // 顶部导航
    .top,
    .header-main {
        background: @dark-bg-secondary !important;
        border-bottom-color: @dark-border !important;
    }

    // 侧边栏
    .leftBar,
    .sidebar-container {
        background: @dark-bg-secondary !important;
    }

    .system-title {
        background: @dark-bg-secondary !important;
        color: @dark-text-primary !important;
    }

    // 菜单
    .el-menu {
        background: @dark-bg-secondary !important;
        border-color: @dark-border !important;
        
        .el-menu-item {
            color: @dark-text-primary !important;
            
            &:hover {
                background: @dark-bg-tertiary !important;
                color: @dark-text-primary !important;
            }
            
            &.is-active {
                background: @blueColor !important;
                color: #fff !important;
            }
        }
    }

    // 表单元素
    .el-input__inner,
    .el-textarea__inner {
        background: @dark-bg-tertiary !important;
        border-color: @dark-border !important;
        color: @dark-text-primary !important;
        
        &::placeholder {
            color: @dark-text-muted !important;
        }
    }

    .el-select .el-input__inner {
        background: @dark-bg-tertiary !important;
        border-color: @dark-border !important;
        color: @dark-text-primary !important;
    }

    // 按钮
    .el-button--default {
        background: @dark-bg-tertiary !important;
        border-color: @dark-border !important;
        color: @dark-text-primary !important;
        
        &:hover {
            background: @dark-border !important;
            border-color: @dark-border-light !important;
        }
    }

    .el-button--primary {
        background: @blueColor !important;
        border-color: @blueColor !important;
        color: #fff !important;
    }

    // 表格
    .el-table {
        background: @dark-bg-secondary !important;
        color: @dark-text-primary !important;
        
        th,
        td {
            background: @dark-bg-secondary !important;
            border-color: @dark-border !important;
            color: @dark-text-primary !important;
        }
        
        .el-table__header-wrapper th {
            background: @dark-bg-tertiary !important;
            color: @dark-text-primary !important;
        }
        
        .el-table__row:hover td {
            background: @dark-bg-tertiary !important;
        }
    }

    // 对话框
    .el-dialog {
        background: @dark-bg-secondary !important;
        border-color: @dark-border !important;
        
        .el-dialog__header {
            background: @dark-bg-tertiary !important;
            border-bottom-color: @dark-border !important;
            color: @dark-text-primary !important;
        }
        
        .el-dialog__body {
            background: @dark-bg-secondary !important;
            color: @dark-text-primary !important;
        }
    }

    // 抽屉
    .el-drawer {
        background: @dark-bg-secondary !important;
        color: @dark-text-primary !important;
    }

    // 弹出框
    .el-popover {
        background: @dark-bg-secondary !important;
        border-color: @dark-border !important;
        color: @dark-text-primary !important;
    }

    // 工具提示
    .el-tooltip__popper {
        background: @dark-bg-tertiary !important;
        color: @dark-text-primary !important;
        border-color: @dark-border !important;
    }

    // 消息提示
    .el-message {
        background: @dark-bg-secondary !important;
        border-color: @dark-border !important;
        color: @dark-text-primary !important;
    }

    .el-message-box {
        background: @dark-bg-secondary !important;
        border-color: @dark-border !important;
        
        .el-message-box__title {
            color: @dark-text-primary !important;
        }
        
        .el-message-box__content {
            color: @dark-text-primary !important;
        }
    }

    // 开关
    .el-switch {
        .el-switch__core {
            background: @dark-border !important;
        }
        
        &.is-checked .el-switch__core {
            background: @blueColor !important;
        }
    }

    // 选择器下拉框
    .el-select-dropdown {
        background: @dark-bg-secondary !important;
        border-color: @dark-border !important;
        
        .el-select-dropdown__item {
            color: @dark-text-primary !important;
            
            &:hover {
                background: @dark-bg-tertiary !important;
            }
            
            &.selected {
                background: @blueColor !important;
                color: #fff !important;
            }
        }
    }

    // 分页
    .el-pagination {
        .el-pager li {
            background: @dark-bg-tertiary !important;
            color: @dark-text-primary !important;
            border-color: @dark-border !important;
            
            &:hover {
                background: @dark-border !important;
            }
            
            &.active {
                background: @blueColor !important;
                color: #fff !important;
            }
        }
        
        .btn-prev,
        .btn-next {
            background: @dark-bg-tertiary !important;
            color: @dark-text-primary !important;
            border-color: @dark-border !important;
            
            &:hover {
                background: @dark-border !important;
            }
        }
    }

    // 标签页
    .el-tabs {
        .el-tabs__header {
            background: @dark-bg-secondary !important;
            border-bottom-color: @dark-border !important;
        }
        
        .el-tabs__item {
            color: @dark-text-secondary !important;
            border-color: @dark-border !important;
            
            &:hover {
                color: @dark-text-primary !important;
            }
            
            &.is-active {
                color: @blueColor !important;
                border-bottom-color: @blueColor !important;
            }
        }
        
        .el-tabs__content {
            background: @dark-bg-secondary !important;
            color: @dark-text-primary !important;
        }
    }

    // 步骤条
    .el-steps {
        .el-step__title {
            color: @dark-text-primary !important;
        }
        
        .el-step__description {
            color: @dark-text-secondary !important;
        }
    }

    // 进度条
    .el-progress {
        .el-progress__text {
            color: @dark-text-primary !important;
        }
    }

    // 加载
    .el-loading-mask {
        background: rgba(26, 26, 26, 0.8) !important;
    }

    // 滚动条
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: @dark-bg-tertiary;
    }
    
    ::-webkit-scrollbar-thumb {
        background: @dark-border;
        border-radius: 4px;
        
        &:hover {
            background: @dark-border-light;
        }
    }

    // 自定义样式覆盖
    .contentValue,
    .contentValue_25B,
    .contentValue_20B,
    .contentValue_20B_L,
    .contentValue_16B {
        color: @dark-text-primary !important;
    }

    .contentTitle,
    .contentTitle_edit,
    .contentTitle_H25,
    .contentTitle_H30 {
        color: @dark-text-primary !important;
    }

    .title,
    .title_SIM,
    .title_sms,
    .title_back,
    .subTitle,
    .subTitle_blue_btn {
        color: @dark-text-primary !important;
    }

    .change,
    .edit,
    .edit_row100,
    .add,
    .addBtn {
        color: @blueColor !important;
    }

    .editBtn {
        color: @blueColor !important;
    }

    .redTips {
        color: #ff7d7d !important;
    }

    .noSim {
        color: #ffaa00 !important;
    }

    .radioMsg {
        color: @dark-text-primary !important;
    }

    .add_NO,
    .edit_NO {
        color: @dark-text-muted !important;
    }

    // 分割线
    hr {
        background-color: @dark-border !important;
    }

    // 信息框
    .InfoBox,
    .InfoBox_sms_list,
    .InfoBox_log {
        background: @dark-bg-tertiary !important;
        border-color: @dark-border !important;
        color: @dark-text-primary !important;
    }

    // 开关样式
    .switch {
        background-color: @dark-border !important;
    }

    .switch-label {
        color: @dark-text-muted !important;
    }

    .switch-input:checked + .switch-label {
        color: @dark-text-primary !important;
    }

    .switch-selection {
        background-color: @blueColor !important;
    }

    // 加载动画
    .loading {
        color: @dark-text-primary !important;
    }

    // 倒计时
    .countDown {
        color: @dark-text-primary !important;
    }

    // 下载按钮
    .download {
        filter: invert(1);
    }

    // 眼睛图标
    .my-eye-reveal,
    .my-eye-hide {
        filter: invert(1);
    }

    // 返回按钮
    .back-image {
        filter: invert(1);
    }

    // 信号图片
    .signalImg {
        filter: invert(1);
    }

    // 连接图片
    .img_connect_wps {
        filter: invert(1);
    }

    // 工具提示
    .el-tooltip__popper {
        max-width: 800px !important;
        background: @dark-bg-tertiary !important;
        color: @dark-text-primary !important;
        border-color: @dark-border !important;
    }

    // 消息框
    .el-message {
        min-width: 200px !important;
        background: @dark-bg-secondary !important;
        border-color: @dark-border !important;
        color: @dark-text-primary !important;
    }

    .el-message-box {
        width: 315px !important;
        background: @dark-bg-secondary !important;
        border-color: @dark-border !important;
        
        .el-message-box__title {
            color: @dark-text-primary !important;
        }
        
        .el-message-box__content {
            color: @dark-text-primary !important;
        }
        
        .el-message-box__btns {
            .el-button {
                background-color: @blueColor !important;
                border-color: @blueColor !important;
            }
        }
    }

    // 响应式设计
    @media (max-width: 1273px) {
        .page-content {
            background-color: @dark-bg-secondary !important;
        }
        
        .page-content-text {
            background-color: @dark-bg-secondary !important;
        }
        
        .page-content-edit {
            background: @dark-bg-tertiary !important;
        }
        
        .page-content-normal {
            background: @dark-bg-secondary !important;
        }
        
        .hr_log {
            background: @dark-bg-secondary !important;
        }
    }

    @media (min-width: 1274px) {
        .page-content {
            background-color: @dark-bg-secondary !important;
        }
        
        .page-content-text {
            background-color: @dark-bg-secondary !important;
        }
        
        .page-content-edit {
            background: @dark-bg-tertiary !important;
        }
        
        .page-content-normal {
            background: @dark-bg-secondary !important;
        }
        
        .hr_log {
            background: @dark-bg-secondary !important;
        }
    }
}
